import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { Flower } from '../flower';
import { BLViewComponent } from './b-lview.component';
import { CLViewComponent } from './c-lview.component';

@Component({
  selector: 'app-a',
  standalone: true,
  providers: [
    {
      provide: Flower,
      useValue: new Flower('🌹'),
    },
  ],
  viewProviders: [
    {
      provide: Flower,
      useValue: new Flower('🌷'),
    },
  ],
  template: `
    A <code>provider</code>: 🌹
    <div
      class="p-2 m-2 border-2 border-dashed border-red-400 rounded-lg"
    >
      <p>A <code>viewProvider</code>: 🌷</p>
      <app-b-lview>
        <app-c-lview [prefix]="projectionPrefix" />
      </app-b-lview>
      <app-c-lview [prefix]="prefix" />
    </div>
  `,
  styles: `
    :host {
      display: block;
      @apply p-2 m-2 border-2 border-red-600 rounded;
      width: 35rem;
    }
  `,
  imports: [CommonModule, BLViewComponent, CLViewComponent],
})
export class ALViewComponent {
  prefix = "A's view";
  projectionPrefix = "A's view, projected to B";
}

export default ALViewComponent;
